<template>
  <div :class="className" :style="style"></div>
</template>

<script>
let echarts = require('echarts')

export default {
  name: "barChart",
  props: {
    className: {
      type: String,
      default: 'barChart'
    },
    width: {
      type: String,
      default: '90%'
    },
    title: {
      type: String,
      default: 'title'
    },
    subtitle: {
      type: String,
      default: 'subtitle'
    },
    xData: {
      type: Array,
      require: true,
    },
    sData: {
      type: Array,
      require: true,
    }

  },
  data() {
    return {
      style: {
        width: this.width,
        height: '250px',
        backgroundColor: 'white',
        margin: '0 0.53333rem 0.26667rem',
        borderRadius: '0.26667rem'
      }
    };
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.querySelector('.' + this.className));

      let option = {
        grid: {
          x: '15%', //相当于距离左边效果:padding-left
          bottom: '15%',
        },
        title: {
          left: 'center',
          text: this.title,
          textStyle: {
            color: '#0DB9F2',        //颜色
            fontStyle: 300,     //风格
            fontWeight: 300,    //粗细
            fontFamily: 'Microsoft yahei',   //字体
            fontSize: 14,     //大小
            align: 'center'   //水平对齐
          },
          subtext: this.subtitle,
          subtextStyle: {          //对应样式
            color: '#ab1bcb',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "axis",
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.xData,
          }
        ],
        yAxis: [
          {
            type: "value",

            name: '喝水量(ml)',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "喝水量",
            type: "bar",
            //设置柱状图宽度
            barWidth: "15",
            //柱状图间距
            barGap: "150%",
            data: this.sData,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#5ad9e8"
                    },
                    {
                      offset: 1,
                      color: "#caecf0"
                    }
                  ]
              )

            }
          },
        ]
      };
      //  使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>
